<template>
  <intro-view :usage="usage">
    <ui-to-mask :enabled="toggleMaskEnable" style="color: #f00">
      <div>锄禾日当午</div>
      <div>汗滴禾下土</div>
      <ui-to-mask-item :enabled="toggleMaskItemEnable" :allowEvent="toggleMaskItemAllowEvent">
        <button @click="btnClick">谁知盘中餐</button>
        <div slot="whenMask">
          hello world
        </div>
      </ui-to-mask-item>
      <div>粒粒皆辛苦</div>
    </ui-to-mask>
    <ul>
      <li><button @click="toggleMaskEnable = !toggleMaskEnable">toggleMask -- enabled [{{toggleMaskEnable}}]</button></li>
      <li><button @click="toggleMaskItemEnable = !toggleMaskItemEnable">toggleMaskItem -- enabled [{{toggleMaskItemEnable}}]</button></li>
      <li><button @click="toggleMaskItemAllowEvent = !toggleMaskItemAllowEvent">toggleMaskItem -- allowEvent [{{toggleMaskItemAllowEvent}}]</button></li>
    </ul>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  export default {
    data () {
      return {
        usage,
        toggleMaskEnable: true,
        toggleMaskItemEnable: true,
        toggleMaskItemAllowEvent: true,
      }
    },
    methods: {
      btnClick () {
        alert('toggleMaskItemAllowEvent')
      }
    }
  }
</script>
